<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Orixy - Digital Agency  Documentation</title>
  <!-- Stylesheets -->
  <link href="css/bootstrap.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <link href="css/scrollbar.css" rel="stylesheet">
  <!-- Responsive -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
    </head>

    <body>
      <!--Page Wrapper-->
      <div class="page-wrapper">

        <!--Sidebar-->
        <aside id="sidebar">

          <!--Toggle Button-->
          <div class="button-container clearfix"><div class="menu-toggle flaticon-menu10"></div></div>

          <!--Menu Box-->
          <div class="menu-box">
           <!--Logo-->
           <br>
           <div class="logo text-right"><a href="#"><img src="images/logo.png" alt=""></a></div>

           <!--Sticky Menu-->
           <nav class="sticky-menu">
             <ul>
               <li class="current"><a href="#introduction">Introduction <span class="fa fa-arrow-right"></span></a></li>
               <li><a href="#html-structure">HTML Structure <span class="fa fa-arrow-right"></span></a></li>
               <li><a href="#slider">Slider Structure <span class="fa fa-arrow-right"></span></a></li>
               <li><a href="#ch-tab">Banner Structure<span class="fa fa-arrow-right"></span></a></li>
               <li><a href="#it-typer">Portfolio Tab<span class="fa fa-arrow-right"></span></a></li>
               <li><a href="#it-cyber">Testimonial Slider<span class="fa fa-arrow-right"></span></a></li>
               <li><a href="#it-counter">Counter Up<span class="fa fa-arrow-right"></span></a></li>
               <li><a href="#it-port">Client Slider<span class="fa fa-arrow-right"></span></a></li>
               <li><a href="#it-video">Video PopUp<span class="fa fa-arrow-right"></span></a></li>
               <li><a href="#it-abouttab">Sreenshoot Slider<span class="fa fa-arrow-right"></span></a></li>
               <li><a href="#skill-progress">Skill Progress Bar<span class="fa fa-arrow-right"></span></a></li>
               <li><a href="#faq-accordion">Faq Accordion<span class="fa fa-arrow-right"></span></a></li>
               <li><a href="#portfolio-filter">Portfolio Filter<span class="fa fa-arrow-right"></span></a></li>
               <li><a href="#contact-map">Circle Progress<span class="fa fa-arrow-right"></span></a></li>
               <li><a href="#it-tst-slide">Marquee<span class="fa fa-arrow-right"></span></a></li>
               <li><a href="#it-contact">Contact Form PHP<span class="fa fa-arrow-right"></span></a></li>
               <li><a href="#css-structure">CSS Files and Structure <span class="fa fa-arrow-right"></span></a></li>
               <li><a href="#javascript">Javascript <span class="fa fa-arrow-right"></span></a></li>
               <li><a href="#sources-credits">Sources and Credits <span class="fa fa-arrow-right"></span></a></li>
               <li><a href="#support">Support <span class="fa fa-arrow-right"></span></a></li>
             </ul>

           </nav>

         </div>

         <div class="copyright">Copyright &copy; <a target="_blank" href="http://themeforest.net/user/themexriver/">themexriver</a> 2022</div>
       </aside>

       <div id="content-section">

        <!--Introduction Section-->
        <section class="section introduction" id="introduction">
         <div class="sec-title">
           <span class="icon fa fa-windows"></span>
           <h2>Intoduction</h2>
         </div>

         <br>
         <div class="sec-content">
           <h2>Orixy - Digital Agency HTML Template</h2>
           <h3>An HTML Template</h3>

           <div class="separator"></div>

           <strong>Created :</strong> 12/10/2022<br>
           <strong>By :</strong> themexriver<br>
           <strong>Website :</strong> <a href="https://themexriver.com/">https://themexriver.com/</a> <br>

           <br>
           <p>Thank you for purchasing <strong>Orixy</strong>  - Digital Agency HTML Template. If you have any questions that are beyond the scope of this help file, please feel free to email, via my user page contact form or put a ticket at Support Center .<br>Thankyou so much!</p>

         </div>

       </section>

       <!--HTML Structure-->
       <section class="section html-structure" id="html-structure">
         <div class="sec-title">
           <span class="icon fa fa-th-large"></span>
           <h2>HTML Structure</h2>
         </div>

         <br>
         <div class="sec-content">

          <h3>
            The html template uses Latest <strong>Bootstrap v5.0.0 </strong> with valid HTML5 tags. This theme is a responisve layout with 4 column Support column. All of the information in content area is nested within a class and comes with predefined classes.
          </h3>


          <pre class="prettyprint lang-html linenums">
           &lt;!-- Start of header
           ============================================= --&gt;
           &lt;header&gt;
           ...
           &lt;/header&gt;
           &lt;!-- End of header
           ============================================= --&gt;

           &lt;!-- Start of section name
           ============================================= --&gt;
           &lt;section id="section-name-id" class="section-name-class"&gt;
           ...
           &lt;/section&gt;
           &lt;!-- End section name
           ============================================= --&gt;


           &lt;!-- Start of footer
           ============================================= --&gt;
           &lt;footer&gt;
           ...
           &lt;/footer&gt;
           &lt;!-- End of footer
           ============================================= --&gt;
         </pre>
       </div>
     </section>
     <!-- slider structure -->
     <section class="section slider" id="slider">
      <div class="sec-title">
       <span class="icon fa fa-th-large"></span>
       <h2>Main Slider Structure</h2>
     </div>

     <br>
     <div class="sec-content">

      <h3>
        To learn how to use <strong>Main Slider </strong>, here is the code or go to <a href="https://owlcarousel2.github.io/OwlCarousel2/" target="_blank" class="text-primary"><strong>Owl Carousel 2</strong></a> and check how does it work.
      </h3>
      <br>
      <pre class="prettyprint lang-html linenums">
        &lt;section id="ori-slider-1" class="ori-slider-section-1 position-relative"&gt;
        &lt;div class="ori-slider-content-wrapper-1 postion-relative"&gt;
        &lt;div class="ori-slider-social position-absolute text-uppercase ul-li"&gt;
        &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fab fa-facebook-f"&gt;&lt;/i&gt; Facebook&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fab fa-youtube"&gt;&lt;/i&gt; Youtube&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fab fa-twitter"&gt;&lt;/i&gt;twitter&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="ori-slider-wrap-1"&gt;
        &lt;div  class="ori-slider-content-1 position-relative"&gt;
        &lt;div class="ori-slider-text text-center  text-uppercase"&gt;
        &lt;h1&gt;Build Digital &lt;span&gt;PRoduct&lt;/span&gt; 
        and Brand &lt;i class="fas fa-arrow-right"&gt;&lt;/i&gt;
        &lt;/h1&gt;
        &lt;div class="slider-play-btn"&gt;
        &lt;a class="video_box d-flex align-items-center justify-content-center text-uppercase" href="https://www.youtube.com/watch?v=O0pLvLtoESc"&gt;PLAY&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="ori-slider-img position-absolute"&gt;
        &lt;img src="assets/img/slider/slider-1.png" alt=""&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="ori-slider-content-1 position-relative"&gt;
        &lt;div class="ori-slider-text text-center  text-uppercase"&gt;
        &lt;h1&gt;Build Digital &lt;span&gt;PRoduct&lt;/span&gt; 
        and Brand &lt;i class="fas fa-arrow-right"&gt;&lt;/i&gt;
        &lt;/h1&gt;
        &lt;div class="slider-play-btn"&gt;
        &lt;a class="video_box d-flex align-items-center justify-content-center text-uppercase" href="https://www.youtube.com/watch?v=O0pLvLtoESc"&gt;PLAY&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="ori-slider-img position-absolute"&gt;
        &lt;img src="assets/img/slider/slider-1.png" alt=""&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="ori-slider-content-1 position-relative"&gt;
        &lt;div class="ori-slider-text text-center  text-uppercase"&gt;
        &lt;h1&gt;Build Digital &lt;span&gt;PRoduct&lt;/span&gt; 
        and Brand &lt;i class="fas fa-arrow-right"&gt;&lt;/i&gt;
        &lt;/h1&gt;
        &lt;div class="slider-play-btn"&gt;
        &lt;a class="video_box d-flex align-items-center justify-content-center text-uppercase" href="https://www.youtube.com/watch?v=O0pLvLtoESc"&gt;PLAY&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="ori-slider-img position-absolute"&gt;
        &lt;img src="assets/img/slider/slider-1.png" alt=""&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;

        &lt;/div&gt;
        &lt;/section&lt;
      </pre>
    </div>
  </section>


  <!-- Challenge Tab structure -->
  <section class="section ch-tab" id="ch-tab">
    <div class="sec-title">
     <span class="icon fa fa-th-large"></span>
     <h2>Banner Structure</h2>
   </div>

   <br>
   <div class="sec-content">

    <h3>
      To learn how to use <strong>Banner Structure </strong>, here is the code
    </h3>
    <br>
    <pre class="prettyprint lang-html linenums">
      &lt;rs-module-wrap id="rev_slider_5_1_wrapper" data-alias="slider-3" data-source="gallery" style="visibility:hidden;background:transparent;padding:0;margin:0px auto;margin-top:0;margin-bottom:0;"&gt;
      &lt;rs-module id="rev_slider_5_1" style="" data-version="6.5.16"&gt;
      &lt;rs-slides&gt;
      &lt;rs-slide style="position: absolute;" data-key="rs-16" data-title="Slide" data-in="o:0;" data-out="a:false;"&gt;
      &lt;img src="assets/transparent.png" alt="Slide" class="rev-slidebg tp-rs-img" data-no-retina&gt;
      &lt;!--
      --&gt;&lt;rs-layer
      id="slider-5-slide-16-layer-0" 
      data-type="text"
      data-color="#bac1d4"
      data-rsp_ch="on"
      data-xy="x:c;yo:250px,206px,156px,96px;"
      data-text="w:normal;s:14,11,14,14;l:25,20,26,26;ls:3px,2px,1px,0px;fw:700;a:center;"
      data-frame_0="o:1;"
      data-frame_0_chars="d:5;x:105%;o:1;rY:45deg;rZ:90deg;"
      data-frame_0_mask="u:t;"
      data-frame_1="sp:1200;"
      data-frame_1_chars="e:power4.inOut;d:10;rZ:0deg;"
      data-frame_1_mask="u:t;"
      data-frame_999="o:0;st:w;"
      style="z-index:8;font-family:'Arimo';text-transform:uppercase;"
      &gt;We Keep The Terms Simple 
      &lt;/rs-layer&gt;&lt;!--

      --&gt;&lt;a
      id="slider-5-slide-16-layer-1" 
      class="rs-layer"
      href="#" target="_self"
      data-type="text"
      data-rsp_ch="on"
      data-xy="x:c;xo:9px,7px,5px,3px;y:b;yo:115px,105px,79px,56px;"
      data-text="w:normal;s:16,13,9,14;l:25,20,15,26;a:center;"
      data-frame_0="sX:0.9;sY:0.9;"
      data-frame_1="e:power2.inOut;st:3200;sp:1000;"
      data-frame_999="o:0;st:w;"
      style="z-index:12;font-family:'Arimo';"
      &gt;Different Platform? Contact Now 
      &lt;/a&gt;&lt;!--

      --&gt;&lt;rs-layer
      id="slider-5-slide-16-layer-4" 
      data-type="text"
      data-rsp_ch="on"
      data-xy="x:c;xo:0,-2px,0,0;yo:305px,256px,200px,136px;"
      data-text="w:normal;s:77,63,47,28;l:90,74,56,34;fw:700;a:center;"
      data-frame_0="o:1;"
      data-frame_0_chars="d:5;o:0;rX:-90deg;oZ:-50;"
      data-frame_1="st:1300;sp:1750;"
      data-frame_1_chars="e:power4.inOut;d:10;oZ:-50;"
      data-frame_999="o:0;st:w;"
      style="z-index:9;font-family:'Arimo';"
      &gt;Manage your business with &lt;br /&gt;
      smart app. 
      &lt;/rs-layer&gt;&lt;!--

      --&gt;&lt;a
      id="slider-5-slide-16-layer-5" 
      class="rs-layer"
      href="#" target="_self"
      data-type="image"
      data-rsp_ch="on"
      data-xy="x:c;xo:-100px,-82px,-62px,-38px;y:m;yo:170px,132px,100px,61px;"
      data-text="w:normal;s:20,16,12,7;l:0,20,15,9;"
      data-dim="w:184px,151px,114px,70px;h:55px,45px,34px,20px;"
      data-frame_0="x:-50,-41,-31,-19;"
      data-frame_1="x:1px,0,0,0;y:0px,0,0,0;st:3000;sp:1000;"
      data-frame_999="o:0;st:w;"
      style="z-index:10;"
      &gt;&lt;img src="assets/img/logo/app.png" alt="" class="tp-rs-img" width="184" height="55" data-no-retina&gt; 
      &lt;/a&gt;&lt;!--

      --&gt;&lt;a
      id="slider-5-slide-16-layer-6" 
      class="rs-layer"
      href="#" target="_self"
      data-type="image"
      data-rsp_ch="on"
      data-xy="x:c;xo:100px,82px,62px,38px;y:m;yo:170px,132px,100px,61px;"
      data-text="w:normal;s:20,16,12,7;l:0,20,15,9;"
      data-dim="w:183px,151px,114px,70px;h:55px,45px,34px,20px;"
      data-frame_0="x:50,41,31,19;"
      data-frame_1="st:3100;sp:1000;"
      data-frame_999="o:0;st:w;"
      style="z-index:11;"
      &gt;&lt;img src="assets/img/logo/play.png" alt="" class="tp-rs-img" width="183" height="55" data-no-retina&gt; 
      &lt;/a&gt;&lt;!--
      --&gt;           &lt;/rs-slide&gt;
      &lt;/rs-slides&gt;
      &lt;/rs-module&gt;
      &lt;/rs-module-wrap&gt;
    </pre>
  </div>
</section>

<!-- Typer structure -->
<section class="section it-typer" id="it-typer">
  <div class="sec-title">
   <span class="icon fa fa-th-large"></span>
   <h2>Portfolio Tab</h2>
 </div>

 <br>
 <div class="sec-content">

  <h3>
    To learn how to use <strong>Portfolio </strong>, here is the code or go to  and check how does it work.
  </h3>
  <br>
  <pre class="prettyprint lang-html linenums">
   &lt;ul class="nav nav-pills" id="pills-tab" role="tablist"&gt;
   &lt;li class="nav-item" role="presentation"&gt;
   &lt;button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true"&gt;NFT Design&lt;/button&gt;
   &lt;/li&gt;
   &lt;li class="nav-item" role="presentation"&gt;
   &lt;button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false"&gt;Your Category name here&lt;/button&gt;
   &lt;/li&gt;
   &lt;li class="nav-item" role="presentation"&gt;
   &lt;button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false"&gt;Your Category name here&lt;/button&gt;
   &lt;/li&gt;
   &lt;li class="nav-item" role="presentation"&gt;
   &lt;button class="nav-link" id="interior-tab" data-bs-toggle="pill" data-bs-target="#interior" type="button" role="tab" aria-controls="pills-contact" aria-selected="false"&gt;Your Category name here&lt;/button&gt;
   &lt;/li&gt;
   &lt;li class="nav-item" role="presentation"&gt;
   &lt;button class="nav-link" id="construction-tab" data-bs-toggle="pill" data-bs-target="#construction" type="button" role="tab" aria-controls="pills-contact" aria-selected="false"&gt;Your Category name here&lt;/button&gt;
   &lt;/li&gt;
   &lt;/ul&gt;


   &lt;div class="tab-content" id="pills-tabContent"&gt;
   &lt;div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"&gt;
   &lt;div class="ori-project-item-1 position-relative"&gt;
   &lt;div class="ori-project-img"&gt;
   &lt;img src="assets/img/proyour Image path here alt="&gt;   
   &lt;/div&gt;
   &lt;div class="ori-project-text position-absolute"&gt;
   &lt;h3&gt;&lt;a href="portfolio-single.html"&gt;portfolio title here&lt;/a&gt;&lt;/h3&gt;
   &lt;span class="text-uppercase project-category"&gt;&lt;a href="#"&gt;put your portfolio category here&lt;/a&gt;&lt;/span&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-link position-absolute"&gt;
   &lt;a href="portfolio-single.html"&gt;&lt;i class="fas fa-arrow-right"&gt;&lt;/i&gt;&lt;/a&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-item-1 position-relative"&gt;
   &lt;div class="ori-project-img"&gt;
   &lt;img src="your Image path here" alt=""&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-text position-absolute"&gt;
   &lt;h3&gt;&lt;a href="portfolio-single.html"&gt;portfolio title here&lt;/a&gt;&lt;/h3&gt;
   &lt;span class="text-uppercase project-category"&gt;&lt;a href="#"&gt;put your portfolio category here&lt;/a&gt;&lt;/span&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-link position-absolute"&gt;
   &lt;a href="portfolio-single.html"&gt;&lt;i class="fas fa-arrow-right"&gt;&lt;/i&gt;&lt;/a&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-item-1 position-relative"&gt;
   &lt;div class="ori-project-img"&gt;
   &lt;img src="your Image path here" alt=""&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-text position-absolute"&gt;
   &lt;h3&gt;&lt;a href="portfolio-single.html"&gt;portfolio title here&lt;/a&gt;&lt;/h3&gt;
   &lt;span class="text-uppercase project-category"&gt;&lt;a href="#"&gt;put your portfolio category here&lt;/a&gt;&lt;/span&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-link position-absolute"&gt;
   &lt;a href="portfolio-single.html"&gt;&lt;i class="fas fa-arrow-right"&gt;&lt;/i&gt;&lt;/a&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-home-tab"&gt;
   &lt;div class="ori-project-item-1 position-relative"&gt;
   &lt;div class="ori-project-img"&gt;
   &lt;img src="your Image path here" alt=""&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-text position-absolute"&gt;
   &lt;h3&gt;&lt;a href="portfolio-single.html"&gt;portfolio title here&lt;/a&gt;&lt;/h3&gt;
   &lt;span class="text-uppercase project-category"&gt;&lt;a href="#"&gt;put your portfolio category here&lt;/a&gt;&lt;/span&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-link position-absolute"&gt;
   &lt;a href="portfolio-single.html"&gt;&lt;i class="fas fa-arrow-right"&gt;&lt;/i&gt;&lt;/a&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-item-1 position-relative"&gt;
   &lt;div class="ori-project-img"&gt;
   &lt;img src="your Image path here" alt=""&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-text position-absolute"&gt;
   &lt;h3&gt;&lt;a href="portfolio-single.html"&gt;portfolio title here&lt;/a&gt;&lt;/h3&gt;
   &lt;span class="text-uppercase project-category"&gt;&lt;a href="#"&gt;put your portfolio category here&lt;/a&gt;&lt;/span&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-link position-absolute"&gt;
   &lt;a href="portfolio-single.html"&gt;&lt;i class="fas fa-arrow-right"&gt;&lt;/i&gt;&lt;/a&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-item-1 position-relative"&gt;
   &lt;div class="ori-project-img"&gt;
   &lt;img src="your Image path here" alt=""&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-text position-absolute"&gt;
   &lt;h3&gt;&lt;a href="portfolio-single.html"&gt;portfolio title here&lt;/a&gt;&lt;/h3&gt;
   &lt;span class="text-uppercase project-category"&gt;&lt;a href="#"&gt;put your portfolio category here&lt;/a&gt;&lt;/span&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-link position-absolute"&gt;
   &lt;a href="portfolio-single.html"&gt;&lt;i class="fas fa-arrow-right"&gt;&lt;/i&gt;&lt;/a&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-home-tab"&gt;
   &lt;div class="ori-project-item-1 position-relative"&gt;
   &lt;div class="ori-project-img"&gt;
   &lt;img src="your Image path here" alt=""&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-text position-absolute"&gt;
   &lt;h3&gt;&lt;a href="portfolio-single.html"&gt;portfolio title here&lt;/a&gt;&lt;/h3&gt;
   &lt;span class="text-uppercase project-category"&gt;&lt;a href="#"&gt;put your portfolio category here&lt;/a&gt;&lt;/span&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-link position-absolute"&gt;
   &lt;a href="portfolio-single.html"&gt;&lt;i class="fas fa-arrow-right"&gt;&lt;/i&gt;&lt;/a&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-item-1 position-relative"&gt;
   &lt;div class="ori-project-img"&gt;
   &lt;img src="your Image path here" alt=""&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-text position-absolute"&gt;
   &lt;h3&gt;&lt;a href="portfolio-single.html"&gt;portfolio title here&lt;/a&gt;&lt;/h3&gt;
   &lt;span class="text-uppercase project-category"&gt;&lt;a href="#"&gt;put your portfolio category here&lt;/a&gt;&lt;/span&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-link position-absolute"&gt;
   &lt;a href="portfolio-single.html"&gt;&lt;i class="fas fa-arrow-right"&gt;&lt;/i&gt;&lt;/a&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-item-1 position-relative"&gt;
   &lt;div class="ori-project-img"&gt;
   &lt;img src="your Image path here" alt=""&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-text position-absolute"&gt;
   &lt;h3&gt;&lt;a href="portfolio-single.html"&gt;portfolio title here&lt;/a&gt;&lt;/h3&gt;
   &lt;span class="text-uppercase project-category"&gt;&lt;a href="#"&gt;put your portfolio category here&lt;/a&gt;&lt;/span&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-link position-absolute"&gt;
   &lt;a href="portfolio-single.html"&gt;&lt;i class="fas fa-arrow-right"&gt;&lt;/i&gt;&lt;/a&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="tab-pane fade" id="interior" role="tabpanel" aria-labelledby="pills-home-tab"&gt;
   &lt;div class="ori-project-item-1 position-relative"&gt;
   &lt;div class="ori-project-img"&gt;
   &lt;img src="your Image path here" alt=""&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-text position-absolute"&gt;
   &lt;h3&gt;&lt;a href="portfolio-single.html"&gt;portfolio title here&lt;/a&gt;&lt;/h3&gt;
   &lt;span class="text-uppercase project-category"&gt;&lt;a href="#"&gt;put your portfolio category here&lt;/a&gt;&lt;/span&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-link position-absolute"&gt;
   &lt;a href="portfolio-single.html"&gt;&lt;i class="fas fa-arrow-right"&gt;&lt;/i&gt;&lt;/a&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-item-1 position-relative"&gt;
   &lt;div class="ori-project-img"&gt;
   &lt;img src="your Image path here" alt=""&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-text position-absolute"&gt;
   &lt;h3&gt;&lt;a href="portfolio-single.html"&gt;portfolio title here&lt;/a&gt;&lt;/h3&gt;
   &lt;span class="text-uppercase project-category"&gt;&lt;a href="#"&gt;put your portfolio category here&lt;/a&gt;&lt;/span&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-link position-absolute"&gt;
   &lt;a href="portfolio-single.html"&gt;&lt;i class="fas fa-arrow-right"&gt;&lt;/i&gt;&lt;/a&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-item-1 position-relative"&gt;
   &lt;div class="ori-project-img"&gt;
   &lt;img src="your Image path here" alt=""&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-text position-absolute"&gt;
   &lt;h3&gt;&lt;a href="portfolio-single.html"&gt;portfolio title here&lt;/a&gt;&lt;/h3&gt;
   &lt;span class="text-uppercase project-category"&gt;&lt;a href="#"&gt;put your portfolio category here&lt;/a&gt;&lt;/span&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-link position-absolute"&gt;
   &lt;a href="portfolio-single.html"&gt;&lt;i class="fas fa-arrow-right"&gt;&lt;/i&gt;&lt;/a&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="tab-pane fade" id="construction" role="tabpanel" aria-labelledby="pills-home-tab"&gt;
   &lt;div class="ori-project-item-1 position-relative"&gt;
   &lt;div class="ori-project-img"&gt;
   &lt;img src="your Image path here" alt=""&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-text position-absolute"&gt;
   &lt;h3&gt;&lt;a href="portfolio-single.html"&gt;portfolio title here&lt;/a&gt;&lt;/h3&gt;
   &lt;span class="text-uppercase project-category"&gt;&lt;a href="#"&gt;put your portfolio category here&lt;/a&gt;&lt;/span&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-link position-absolute"&gt;
   &lt;a href="portfolio-single.html"&gt;&lt;i class="fas fa-arrow-right"&gt;&lt;/i&gt;&lt;/a&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-item-1 position-relative"&gt;
   &lt;div class="ori-project-img"&gt;
   &lt;img src="your Image path here" alt=""&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-text position-absolute"&gt;
   &lt;h3&gt;&lt;a href="portfolio-single.html"&gt;portfolio title here&lt;/a&gt;&lt;/h3&gt;
   &lt;span class="text-uppercase project-category"&gt;&lt;a href="#"&gt;put your portfolio category here&lt;/a&gt;&lt;/span&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-link position-absolute"&gt;
   &lt;a href="portfolio-single.html"&gt;&lt;i class="fas fa-arrow-right"&gt;&lt;/i&gt;&lt;/a&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-item-1 position-relative"&gt;
   &lt;div class="ori-project-img"&gt;
   &lt;img src="your Image path here" alt=""&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-text position-absolute"&gt;
   &lt;h3&gt;&lt;a href="portfolio-single.html"&gt;portfolio title here&lt;/a&gt;&lt;/h3&gt;
   &lt;span class="text-uppercase project-category"&gt;&lt;a href="#"&gt;put your portfolio category here&lt;/a&gt;&lt;/span&gt;
   &lt;/div&gt;
   &lt;div class="ori-project-link position-absolute"&gt;
   &lt;a href="portfolio-single.html"&gt;&lt;i class="fas fa-arrow-right"&gt;&lt;/i&gt;&lt;/a&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;/div&gt;
 </pre>
</div>
</section>

<!-- Cyber Security Slider structure -->
<section class="section it-cyber" id="it-cyber">
  <div class="sec-title">
   <span class="icon fa fa-th-large"></span>
   <h2>Testimonial Slider Structure</h2>
 </div>

 <br>
 <div class="sec-content">

  <h3>
    To learn how to use <strong>Testimonial Slider </strong>, here is the code or go to <a href="https://kenwheeler.github.io/slick/" target="_blank" class="text-primary"><strong>Slick Slider</strong></a> and check how does it work.
  </h3>
  <br>
  <pre class="prettyprint lang-html linenums">
    &lt;div class="ori-testimonial-slider-1"&gt;
    &lt;div class="ori-testimonial-item-area"&gt;
    &lt;div class="ori-testimonial-item-1"&gt;
    &lt;div class="ori-testimonial-text text-center pera-content"&gt;
    &lt;p&gt;“Our office is something we are pleased with. We consider it the little magnet; it is wanting to come here and afterward difficult to leave it. Our office is additionally a big name.”
    &lt;/p&gt;
    &lt;div class="ori-testimonial-author text-center text-uppercase"&gt;
    &lt;h4&gt;Hahimlam Dirat&lt;/h4&gt;
    &lt;span&gt;ui/ux Designer&lt;/span&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="ori-testimonial-item-area"&gt;
    &lt;div class="ori-testimonial-item-1"&gt;
    &lt;div class="ori-testimonial-text text-center pera-content"&gt;
    &lt;p&gt;“Our office is something we are pleased with. We consider it the little magnet; it is wanting to come here and afterward difficult to leave it. Our office is additionally a big name.”
    &lt;/p&gt;
    &lt;div class="ori-testimonial-author text-center text-uppercase"&gt;
    &lt;h4&gt;Hahimlam Dirat&lt;/h4&gt;
    &lt;span&gt;ui/ux Designer&lt;/span&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="ori-testimonial-item-area"&gt;
    &lt;div class="ori-testimonial-item-1"&gt;
    &lt;div class="ori-testimonial-text text-center pera-content"&gt;
    &lt;p&gt;“Our office is something we are pleased with. We consider it the little magnet; it is wanting to come here and afterward difficult to leave it. Our office is additionally a big name.”
    &lt;/p&gt;
    &lt;div class="ori-testimonial-author text-center text-uppercase"&gt;
    &lt;h4&gt;Hahimlam Dirat&lt;/h4&gt;
    &lt;span&gt;ui/ux Designer&lt;/span&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  </pre>
</div>
</section>


<section class="section it-counter" id="it-counter">
  <div class="sec-title">
   <span class="icon fa fa-th-large"></span>
   <h2>Counter Structure</h2>
 </div>

 <br>
 <div class="sec-content">

  <h3>
   Counter Up
 </h3>
 <br>
 <pre class="prettyprint lang-html linenums">
  &lt;h3&gt;&lt;span class="counter"&gt;349&lt;/span&gt;+ Rating&lt;/h3&gt;
</pre>
</div>
</section>


<section class="section it-port" id="it-port">
  <div class="sec-title">
   <span class="icon fa fa-th-large"></span>
   <h2>Client Slider</h2>
 </div>

 <br>
 <div class="sec-content">

  <h3>
   To learn how to use <strong>Client Slider </strong>,  here is the code or go to <a href="https://kenwheeler.github.io/slick/" target="_blank" class="text-primary"><strong>Slick Slider</strong></a> and check how does it work.
 </h3>
 <br>
 <pre class="prettyprint lang-html linenums">
  &lt;div class="ori-sponsor-slider"&gt;
  &lt;div class="ori-sponsor-item"&gt;
  &lt;div class="ori-sponsor-img"&gt;
  &lt;a href="#"&gt;
  &lt;img src="assets/img/sponsor/sp1.png" alt=""&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="ori-sponsor-item"&gt;
  &lt;div class="ori-sponsor-img"&gt;
  &lt;a href="#"&gt;
  &lt;img src="assets/img/sponsor/sp2.png" alt=""&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="ori-sponsor-item"&gt;
  &lt;div class="ori-sponsor-img"&gt;
  &lt;a href="#"&gt;
  &lt;img src="assets/img/sponsor/sp3.png" alt=""&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="ori-sponsor-item"&gt;
  &lt;div class="ori-sponsor-img"&gt;
  &lt;a href="#"&gt;
  &lt;img src="assets/img/sponsor/sp4.png" alt=""&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="ori-sponsor-item"&gt;
  &lt;div class="ori-sponsor-img"&gt;
  &lt;a href="#"&gt;
  &lt;img src="assets/img/sponsor/sp5.png" alt=""&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="ori-sponsor-item"&gt;
  &lt;div class="ori-sponsor-img"&gt;
  &lt;a href="#"&gt;
  &lt;img src="assets/img/sponsor/sp1.png" alt=""&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="ori-sponsor-item"&gt;
  &lt;div class="ori-sponsor-img"&gt;
  &lt;a href="#"&gt;
  &lt;img src="assets/img/sponsor/sp2.png" alt=""&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="ori-sponsor-item"&gt;
  &lt;div class="ori-sponsor-img"&gt;
  &lt;a href="#"&gt;
  &lt;img src="assets/img/sponsor/sp3.png" alt=""&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
</pre>
</div>
</section>

<section class="section it-video" id="it-video">
  <div class="sec-title">
   <span class="icon fa fa-th-large"></span>
   <h2>Video Popup</h2>
 </div>

 <br>
 <div class="sec-content">

  <h3>
   Video Popup Settings
 </h3>
 <br>
 <pre class="prettyprint lang-html linenums">
  &lt;a class="video_box" href="Put your youtube video link here">Play&lt;/a&lt;
</pre>
</div>
</section>

<section class="section it-abouttab" id="it-abouttab">
  <div class="sec-title">
   <span class="icon fa fa-th-large"></span>
   <h2>Screenshoot Slider</h2>
 </div>

 <br>
 <div class="sec-content">

  <h3>
    Screenshoot Slider Settings
  </h3>
  <br>
  <pre class="prettyprint lang-html linenums">
    &lt;div class="swiper-wrapper"&gt;
    &lt;div class="swiper-slide" style="background-image:url(assets/img/screenshoot/sc.png)"&gt;&lt;/div&gt;
    &lt;div class="swiper-slide" style="background-image:url(assets/img/screenshoot/sc.png)"&gt;&lt;/div&gt;
    &lt;div class="swiper-slide" style="background-image:url(assets/img/screenshoot/sc.png)"&gt;&lt;/div&gt;
    &lt;div class="swiper-slide" style="background-image:url(assets/img/screenshoot/sc.png)"&gt;&lt;/div&gt;
    &lt;div class="swiper-slide" style="background-image:url(assets/img/screenshoot/sc.png)"&gt;&lt;/div&gt;
    &lt;div class="swiper-slide" style="background-image:url(assets/img/screenshoot/sc.png)"&gt;&lt;/div&gt;
    &lt;div class="swiper-slide" style="background-image:url(assets/img/screenshoot/sc.png)"&gt;&lt;/div&gt;
    &lt;div class="swiper-slide" style="background-image:url(assets/img/screenshoot/sc.png)"&gt;&lt;/div&gt;
    &lt;div class="swiper-slide" style="background-image:url(assets/img/screenshoot/sc.png)"&gt;&lt;/div&gt;
    &lt;/div&gt;
  </pre>
</div>
</section>

<section class="section skill-progress" id="skill-progress">
  <div class="sec-title">
   <span class="icon fa fa-th-large"></span>
   <h2>Skill Progress Bar</h2>
 </div>

 <br>
 <div class="sec-content">

  <h3>
   Skill Progress Bar Settings
 </h3>
 <br>
 <pre class="prettyprint lang-html linenums">
  &lt;div class="skill-progress-bar"&gt;
  &lt;div class="skill-set-percent headline"&gt;
  &lt;h4&gt;Write Your Progress Title Here&lt;/h4&gt;
  &lt;div class="progress"&gt;
  &lt;div class="progress-bar" data-percent="Put Your Skill Percent Here"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="skill-set-percent headline"&gt;
  &lt;h4&gt;Write Your Progress Title Herep&lt;/h4&gt;
  &lt;div class="progress"&gt;
  &lt;div class="progress-bar" data-percent="Put Your Skill Percent Here"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="skill-set-percent headline"&gt;
  &lt;h4&gt;Write Your Progress Title Here&lt;/h4&gt;
  &lt;div class="progress"&gt;
  &lt;div class="progress-bar" data-percent="Put Your Skill Percent Here"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="skill-set-percent headline"&gt;
  &lt;h4&gt;Write Your Progress Title Here&lt;/h4&gt;
  &lt;div class="progress"&gt;
  &lt;div class="progress-bar" data-percent="Put Your Skill Percent Here"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
</pre>
</div>
</section>

<section class="section faq-accordion" id="faq-accordion">
  <div class="sec-title">
   <span class="icon fa fa-th-large"></span>
   <h2>FAQ Accordion</h2>
 </div>

 <br>
 <div class="sec-content">

  <h3>
    FAQ Accordion Settings
  </h3>
  <br>
  <pre class="prettyprint lang-html linenums">
    &lt;div class="tab-pane animated fadeInUp" id="profile" role="tabpanel" aria-labelledby="profile-tab"&gt;
    &lt;div class="ori-faq-accordion-item-area"&gt;
    &lt;div class="accordion" id="accordionExample_3"&gt;
    &lt;div class="accordion-item"&gt;
    &lt;h2 class="accordion-header" id="heading5"&gt;
    &lt;button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse5" aria-expanded="true" aria-controls="collapse5"&gt;
    Why Orixy is so popular than others
    &lt;/button&gt;
    &lt;/h2&gt;
    &lt;div id="collapse5" class="accordion-collapse collapse show" aria-labelledby="heading5" data-bs-parent="#accordionExample_3"&gt;
    &lt;div class="accordion-body"&gt;
    A Orixy has its own IP address, which is made public instead. While a rather seemingly insignificant change, the Orixy IP address can be used for a number of vital business functions related to everything from security to customer experience.
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="accordion-item"&gt;
    &lt;h2 class="accordion-header" id="heading6"&gt;
    &lt;button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse6" aria-expanded="false" aria-controls="collapse6"&gt;
    How can we get the best from Orixy template?
    &lt;/button&gt;
    &lt;/h2&gt;
    &lt;div id="collapse6" class="accordion-collapse collapse" aria-labelledby="heading6" data-bs-parent="#accordionExample_3"&gt;
    &lt;div class="accordion-body"&gt;
    A Orixy has its own IP address, which is made public instead. While a rather seemingly insignificant change, the Orixy IP address can be used for a number of vital business functions related to everything from security to customer experience.
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="accordion-item"&gt;
    &lt;h2 class="accordion-header" id="heading7"&gt;
    &lt;button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse7" aria-expanded="false" aria-controls="collapse7"&gt;
    What payment methods are available?
    &lt;/button&gt;
    &lt;/h2&gt;
    &lt;div id="collapse7" class="accordion-collapse collapse" aria-labelledby="heading7" data-bs-parent="#accordionExample_3"&gt;
    &lt;div class="accordion-body"&gt;
    A Orixy has its own IP address, which is made public instead. While a rather seemingly insignificant change, the Orixy IP address can be used for a number of vital business functions related to everything from security to customer experience.
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="accordion-item"&gt;
    &lt;h2 class="accordion-header" id="heading8"&gt;
    &lt;button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse8" aria-expanded="false" aria-controls="collapse8"&gt;
    What makes Orixy best creative template?
    &lt;/button&gt;
    &lt;/h2&gt;
    &lt;div id="collapse8" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample_3"&gt;
    &lt;div class="accordion-body"&gt;
    A Orixy has its own IP address, which is made public instead. While a rather seemingly insignificant change, the Orixy IP address can be used for a number of vital business functions related to everything from security to customer experience.
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  </pre>
</div>
</section>

<section class="section portfolio-filter" id="portfolio-filter">
  <div class="sec-title">
   <span class="icon fa fa-th-large"></span>
   <h2>Portfolio Filter</h2>
 </div>

 <br>
 <div class="sec-content">

  <h3>
   Portfolio Filter Settings
 </h3>
 <br>
 <pre class="prettyprint lang-html linenums">
  &lt;ul id="filters" class="nav-gallery text-capitalize text-center"&gt;
  &lt;li class="filtr-button filtr-active" data-filter="all"&gt;All &lt;/li&gt;
  &lt;li class="filtr-button" data-filter="1"&gt; Here Is Your Title &lt;/li&gt;
  &lt;li class="filtr-button" data-filter="2"&gt;Here Is Your Title Is Your Title  &lt;/li&gt;
  &lt;li class="filtr-button" data-filter="3"&gt;Here Is Your Title   &lt;/li&gt;
  &lt;li class="filtr-button" data-filter="4"&gt;Here Is Your Title  &lt;/li&gt;
  &lt;li class="filtr-button" data-filter="5"&gt;Here Is Your Title &lt;/li&gt;
  &lt;/ul&gt;


  &lt;div class="portolio-page-item portfolio-content-2 filtr-container row"&gt;
  &lt;div class="col-lg-4 col-sm-6 filtr-item" data-category="1, 2" data-sort="Busy streets"&gt;
  &lt;div class="ori-portfolio-item position-relative"&gt;
  &lt;div class="portfolio-img"&gt;
  &lt;img src="assets/img/project/pro6.png" alt=""&gt;
  &lt;/div&gt;
  &lt;div class="portfolio-text"&gt;
  &lt;span class="port-category text-uppercase"&gt;&lt;a href="portfolio.html"&gt;Web design&lt;/a&gt;&lt;/span&gt;
  &lt;h3&gt;&lt;a href="portfolio-single.html"&gt;Effective solution For Your Business&lt;/a&gt;&lt;/h3&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
</pre>
</div>
</section>

<section class="section contact-map" id="contact-map">
  <div class="sec-title">
   <span class="icon fa fa-th-large"></span>
   <h2>Circle Progress</h2>
 </div>

 <br>
 <div class="sec-content">

  <h3>
   Circle Progress Settings
 </h3>
 <br>
 <pre class="prettyprint lang-html linenums">
  &lt;div class="graph-outer"&gt;
  &lt;input type="text" class="dial" data-fgColor="#FF7425" data-bgColor="#fff" data-width="180" data-height="180" data-linecap="round"  value="Put your expected value here" &gt;
  &lt;div class="inner-text count-box"&gt;&lt;span class="count-text" data-stop="Put your expected value here" data-speed="4500"&gt;&lt;/span&gt;%&lt;/div&gt;
  &lt;/div&gt;
</pre>
</div>
</section>

<section class="section it-tst-slide" id="it-tst-slide">
  <div class="sec-title">
   <span class="icon fa fa-th-large"></span>
   <h2>Marquee Settings</h2>
 </div>

 <br>
 <div class="sec-content">

  <h3>
    Marquee Settings
  </h3>
  <br>
  <pre class="prettyprint lang-html linenums">
    &lt;div class="ori-testimonial-scroll clearfix"&gt;
    &lt;div class="ori-testimonial-inner-item-2"&gt;
    &lt;div class="ori-testimonial-img-text"&gt;
    &lt;div class="inner-ratting ul-li"&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;i class="fas fa-star"&gt;&lt;/i&gt;&lt;/li&gt;
    &lt;li&gt;&lt;i class="fas fa-star"&gt;&lt;/i&gt;&lt;/li&gt;
    &lt;li&gt;&lt;i class="fas fa-star"&gt;&lt;/i&gt;&lt;/li&gt;
    &lt;li&gt;&lt;i class="fas fa-star"&gt;&lt;/i&gt;&lt;/li&gt;
    &lt;li&gt;&lt;i class="fas fa-star"&gt;&lt;/i&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="inner-text"&gt;
    Excellent UI/Ux Design. She literally transformed my App into a wonderful piece of art. She's got awesome Ui design skills. - Hardworking Dedicated Great Communication Skills
    &lt;/div&gt;
    &lt;div class="inner-author d-flex align-items-center"&gt;
    &lt;div class="author-img"&gt;
    &lt;img src="assets/img/testimonial/tst1.png" alt=""&gt;
    &lt;/div&gt;
    &lt;div class="author-text"&gt;
    &lt;h3&gt;Leslie Alexander&lt;/h3&gt;
    &lt;span&gt;P. Desiger of (Amazon)&lt;/span&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  </pre>
</div>
</section>

<section class="section it-contact" id="it-contact">
  <div class="sec-title">
   <span class="icon fa fa-th-large"></span>
   <h2>Contact Form PHP Setting</h2>
 </div>

 <br>
 <div class="sec-content">

  <h3>
   You can set you set you mail Address by following this. <br>
   N.B- Sometimes your mail send into spam box for security issue when you use it..we recommended that check you spam box
 </h3>
 <br>
 <pre class="prettyprint lang-html linenums">
  <img src="images/mail.png">
</pre>
</div>
</section>

<!--CSS Structure-->
<section class="section css-structure" id="css-structure">
 <div class="sec-title">
   <span class="icon fa fa-at"></span>
   <h2>CSS Files and Structure</h2>
 </div>

 <br>
 <div class="sec-content">

  <h3>Mainly two main CSS files are used in this theme. The first one <strong>bootstrap.css</strong>, second one is <strong>style.css</strong> which for this template and <strong>responsive</strong> style include in style.css file. </h3>
  <p>If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.</p>

  <h3>
  CSS Files</h3>
  <p>
  Common stylesheets included in all pages:</p>

  <pre class="prettyprint lang-html linenums">
    &lt;link rel="stylesheet" href="assets/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="assets/css/jquery-ui.css"&gt;
    &lt;link rel="stylesheet" href="assets/css/fontawesome-all.css"&gt;
    &lt;link rel="stylesheet" href="assets/css/animate.css"&gt;
    &lt;link rel="stylesheet" href="assets/css/odometer-theme-default.css"&gt;
    &lt;link rel="stylesheet" href="assets/css/video.min.css"&gt;
    &lt;link rel="stylesheet" href="assets/css/slick-theme.css"&gt;
    &lt;link rel="stylesheet" href="assets/css/slick.css"&gt;
    &lt;link rel="stylesheet" href="assets/css/global.css"&gt;
    &lt;link rel="stylesheet" href="assets/css/style.css"&gt;

  </pre>
</div>

</section>

<!--Javascript-->
<section class="section javascript" id="javascript">
 <div class="sec-title">
   <span class="icon fa fa-code"></span>
   <h2>Jquery and javascript</h2>
 </div>

 <br>
 <div class="sec-content">

  <h3>This theme imports three types of Javascript files.</h3>
  <ul>
    <li>jQuery</li>
    <li>Custom scripts <strong>(script.js)</strong></li>
    <li>Some plugins</li>
    <br>
    <li><strong>jQuery</strong> is a Javascript library that greatly reduces the amount of code that you must write.</li>
    <li>Most of the animation in this site is carried out from the customs scripts. There are a few functions worth looking over.</li>
  </ul>
  <br>
  <p>In addition to the custom scripts, I have implemented few "tried and true" plugins to create the effects. This plugin is packed, so you won't need to manually edit anything in the file. The only necessary thing to know is how to call the method. <strong>(All javascript plugins include in JS Folder)</strong></p>

  <pre class="prettyprint lang-html linenums">
    &lt;script src="assets/js/jquery.min.js">&lt;/script&gt;
    &lt;script src="assets/js/jquery-ui.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/appear.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/slick.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/twin.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/wow.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/knob.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/jquery.filterizr.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/imagesloaded.pkgd.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/rbtools.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/rs6.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/jarallax.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/jquery.inputarrow.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/swiper.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/jquery.counterup.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/waypoints.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/jquery.magnific-popup.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/jquery.marquee.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/script.js"&gt;&lt;/script&gt;
  </pre>
</div>
</section>


<!--Sources and Credits-->
<section class="section sources-credits" id="sources-credits">
 <div class="sec-title">
   <span class="icon fa fa-credit-card"></span>
   <h2>Sources and Credits</h2>
 </div>

 <br>
 <div class="sec-content">

  <h3>Fonts Used int the template are google fonts, you can find theme on Google Fonts API</h3>

  <p><strong> Fonts Used are :</strong></p>
  <p>"Arimo"</p>
  <p>"Oswald"</p>
  <p>"Jost"</p>
  <p>"Poppins"</p>


  <br>

  <br>


  <br>

  <p><strong> Sliders Used Are :</strong></p>
  <p>Slick Slider</p>
  <p>Swipper Slider Slider</p>
  <p>Revolution Slider</p>
  <br>
  Every Code is properly commented for Editing Ease.
  <br><br>

  <p><strong> Icons Used are :</strong></p>
  <br>
  <p>Fontawsome Icons<br><a href="https://fortawesome.github.io/Font-Awesome/" target="_blank">https://fortawesome.github.io/Font-Awesome/</a></p>                

</div>

</section>

<!--Support-->
<section class="section support" id="support">
 <div class="sec-title">
   <span class="icon fa fa-support"></span>
   <h2>Support</h2>
 </div>

 <br>
 <div class="sec-content">

  <h3>Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have any queries, please feel free to contact us at Support Center.</h3>

  <p>Email Us at : <a href="https://themexriver.helpviser.com/">https://themexriver.helpviser.com/</a> </p>

</div>

</section>


</div>


</div>
<!--End pagewrapper-->

<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.nav.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/scrollbar.js"></script>
<script src="js/script.js"></script>
</body>
</html>